<template>
  <view class="content" :style="[styles]">
    <text
      class="title"
      :style="{                                   color:                                   attribute.titleColor                                   }"
    >{{ attribute.title }}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="input-area">
      <view class="hour-item">
        <input
          @blur="getStatus"
          type="number"
          maxlength="6"
          class="input-box"
          v-model="attribute.value.hour"
        />
        <u--text color="#131313" size="14" text="小时" />
      </view>
      <view class="minute-item">
        <input
          @blur="getStatus"
          maxlength="2"
          type="number"
          class="input-box"
          v-model="attribute.value.minute"
        />
        <u--text color="#131313" size="14" text="分钟" />
      </view>
      <view class="second-item">
        <input @blur="getStatus" type="number" class="input-box" v-model="attribute.value.second" />
        <u--text color="#131313" size="14" text="秒" />
      </view>
    </view>
    <view class="input-rule-text" v-if="requiredFail">{{ attribute.requiredText }}</view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}cus-duration-input`,
  props: {
    attribute: Object,
    styles: Object
  },
  data() {
    return {
      requiredFail: false
    };
  },
  methods: {
    validate() {
      return new Promise(resolve => {
        resolve(this.getStatus() ? this.attribute.requiredText : undefined);
      });
    },
    getStatus() {
      this.$nextTick(() => {
        const { value, required } = this.attribute;
        const { hour, minute, second } = value;
        this.requiredFail =
          required && [hour, minute, second].some(item => item === "");
        if (minute > 60) {
          this.attribute.value.minute = 60;
        }
        if (second > 60) {
          this.attribute.value.second = 60;
        }

        if (!hour) {
          this.attribute.value.hour = 0;
        }
        if (!minute) {
          this.attribute.value.minute = 0;
        }
        if (!second) {
          this.attribute.value.second = 0;
        }
        return this.requiredFail;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;
}

.title {
  color: #333;
  font-size: 28rpx;
}

.red-dot {
  color: rgb(245, 39, 39);
  margin-left: 5rpx;
}

.input-area {
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .item {
    display: flex;
    align-items: center;
    margin-right: 12rpx;

    .input-box {
      box-sizing: border-box;
      border: 1rpx solid #cacaca;
      width: 100rpx;
      height: 62rpx;
      margin: 0 12rpx 0 0;
      padding: 0 10rpx;
      font-size: 28rpx;
    }
  }

  .hour-item,
  .minute-item,
  .second-item {
    @extend .item;
  }

  .hour-item {
    .input-box {
      width: 5em;
    }
  }
}

.input-rule-text {
  color: #f05357;
  font-size: 24rpx;
  padding: 15rpx 18rpx;
}
</style>
